//初始化Vue
var app = new Vue({
	el: '#app',
	data: {
		title: '首页',
		initIndex: 0,
		activeTab: 'tab-webview-main.html',
		tabbar: [{
			icon: 'home',
			title: '首页',
			url: 'html/tab-webview-main.html',
		}, {
			icon: 'email',
			title: '消息',
			url: 'html/tab-webview-subpage-email.html'
		}, {
			icon: 'phone',
			title: '电话',
			url: 'html/tab-webview-subpage-phone.html'
		}, {
			icon: 'gear',
			title: '设置',
			url: 'html/tab-webview-subpage-setting.html'
		}],
		subStyle: {
			top: '44px',
			bottom: '51px'
		}
	},
	ready: function() {
		//初始化mui
		mui.init();

		var self = this;

		if(mui.os.plus) {
			mui.plusReady(function() {
				//设置选项卡
				var curWs = plus.webview.currentWebview();
				for(var i = 0; i < self.tabbar.length; i++) {
					var subUrl = self.tabbar[i].url;
					var subWs = plus.webview.create(subUrl, subUrl, self.subStyle);
					if(i != self.initIndex) {
						subWs.hide();
					}
					curWs.append(subWs);
				};

				/**
				 * 获取本地存储中launchFlag的值
				 * http://www.html5plus.org/doc/zh_cn/storage.html#plus.storage.getItem
				 * 若存在，说明不是首次启动，直接进入首页；
				 * 若不存在，说明是首次启动，进入引导页；
				 */

				var launchFlag = plus.storage.getItem('launchFlag');
				if(launchFlag) {
					mui.openWindow({
						url: "main.html",
						id: "main",
						extras: {
							mark: "index" //额外的参数，仅仅是个标识，实际开发中不用；
						}
					});
				} else {
					mui.openWindow({
						url: "guide.html",
						id: "guide"
					});
				}
			})
		} else {
			createIframe('.mui-content', {
				url: self.tabbar[self.initIndex].url,
				style: self.subStyle
			})
		};

	},
	methods: { //必须要有一定的触发条件才能执行，如点击事件
		tab: function(index) {
			var targetTab = this.tabbar[index].url;
			// 标题切换
			this.title = this.tabbar[index].title;

			if(targetTab == this.activeTab) {
				return;
			}

			// 子页内容切换
			if(mui.os.plus) {
				// 显示目标webview
				plus.webview.show(targetTab);
				// 隐藏当前webview
				plus.webview.hide(this.activeTab);
				// 更改当前活跃的选项卡
				this.activeTab = targetTab;
			} else {
				// 创建iframe代替子页面
				createIframe('.mui-content', {
					url: targetTab,
					style: this.subStyle
				})
			}
		}
	},
	computed: { //在HTML DOM加载后马上执行的，如赋值

	},
	watch: { //监听-用于观察Vue实例上的数据变动

	}
});